<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI恋恋 - 设置</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 16px;
            background-color: white;
            border-bottom: 1px solid var(--border-color);
        }

        .settings-header h1 {
            font-size: 22px;
            font-weight: 600;
            margin: 0;
            color: var(--accent-color);
        }

        .settings-section {
            margin-bottom: 20px;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .settings-section-title {
            padding: 15px 16px;
            font-size: 16px;
            font-weight: 600;
            color: var(--accent-color);
            background-color: var(--secondary-light);
            border-bottom: 1px solid var(--border-color);
        }

        .settings-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--border-color);
            transition: background-color 0.2s;
        }

        .settings-item:last-child {
            border-bottom: none;
        }

        .settings-item:active {
            background-color: #f5f5f5;
        }

        .settings-item-left {
            display: flex;
            align-items: center;
        }

        .settings-item-icon {
            width: 36px;
            height: 36px;
            border-radius: 18px;
            background-color: var(--primary-light);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 12px;
            color: var(--accent-color);
        }

        .settings-item-info {
            display: flex;
            flex-direction: column;
        }

        .settings-item-title {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-color);
            margin: 0;
        }

        .settings-item-description {
            font-size: 12px;
            color: var(--light-text);
            margin: 3px 0 0 0;
        }

        .settings-item-right {
            display: flex;
            align-items: center;
            color: var(--light-text);
        }

        .settings-item-value {
            font-size: 14px;
            margin-right: 8px;
        }

        .settings-item-arrow {
            font-size: 12px;
        }

        .settings-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .settings-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .settings-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .settings-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.settings-slider {
            background-color: var(--primary-color);
        }

        input:checked+.settings-slider:before {
            transform: translateX(26px);
        }

        .settings-logout {
            margin: 20px 16px;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .settings-logout-button {
            padding: 16px;
            text-align: center;
            color: #ff3b30;
            font-size: 16px;
            font-weight: 500;
            transition: background-color 0.2s;
        }

        .settings-logout-button:active {
            background-color: #f5f5f5;
        }

        .settings-version {
            text-align: center;
            font-size: 12px;
            color: var(--light-text);
            margin: 20px 0;
        }

        .settings-container {
            padding: 16px;
            background-color: var(--background-color);
        }

        .user-avatar {
            width: 60px;
            height: 60px;
            border-radius: 30px;
            object-fit: cover;
            border: 2px solid white;
            box-shadow: 0 2px 8px rgba(195, 190, 240, 0.3);
        }
    </style>
</head>

<body data-active-tab="profile">
    <div class="iphone-container">
        <!-- 状态栏 -->
        <div id="status-bar"></div>

        <!-- 页面内容 -->
        <div class="app-content">
            <!-- 设置头部 -->
            <div class="settings-header">
                <a href="profile.html" class="text-gray-700">
                    <i class="fas fa-chevron-left"></i>
                </a>
                <h1>设置</h1>
                <div style="width: 20px;"></div> <!-- 占位，保持标题居中 -->
            </div>

            <!-- 设置内容 -->
            <div class="settings-container">
                <!-- 个人信息设置 -->
                <div class="settings-section">
                    <div class="settings-section-title">个人信息</div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">个人资料</h3>
                                <p class="settings-item-description">修改你的个人信息</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                                alt="用户头像" class="user-avatar" style="width: 40px; height: 40px; border-radius: 20px;">
                            <i class="fas fa-chevron-right settings-item-arrow ml-3"></i>
                        </div>
                    </div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-palette"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">个性化</h3>
                                <p class="settings-item-description">自定义你的AI伴侣形象</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right settings-item-arrow"></i>
                        </div>
                    </div>
                </div>

                <!-- 隐私与安全 -->
                <div class="settings-section">
                    <div class="settings-section-title">隐私与安全</div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-lock"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">隐私设置</h3>
                                <p class="settings-item-description">管理谁可以看到你的内容</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right settings-item-arrow"></i>
                        </div>
                    </div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">账号安全</h3>
                                <p class="settings-item-description">修改密码和安全选项</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right settings-item-arrow"></i>
                        </div>
                    </div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-eye-slash"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">隐身模式</h3>
                                <p class="settings-item-description">暂时隐藏你的在线状态</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <label class="settings-switch">
                                <input type="checkbox">
                                <span class="settings-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 通知设置 -->
                <div class="settings-section">
                    <div class="settings-section-title">通知设置</div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-bell"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">推送通知</h3>
                                <p class="settings-item-description">管理应用通知</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right settings-item-arrow"></i>
                        </div>
                    </div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-comment-alt"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">消息提醒</h3>
                                <p class="settings-item-description">AI伴侣消息提醒</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <label class="settings-switch">
                                <input type="checkbox" checked>
                                <span class="settings-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 应用设置 -->
                <div class="settings-section">
                    <div class="settings-section-title">应用设置</div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-language"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">语言</h3>
                                <p class="settings-item-description">设置应用语言</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <div class="settings-item-value">简体中文</div>
                            <i class="fas fa-chevron-right settings-item-arrow"></i>
                        </div>
                    </div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-moon"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">深色模式</h3>
                                <p class="settings-item-description">切换应用主题</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <label class="settings-switch">
                                <input type="checkbox">
                                <span class="settings-slider"></span>
                            </label>
                        </div>
                    </div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-database"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">清除缓存</h3>
                                <p class="settings-item-description">释放应用占用空间</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <div class="settings-item-value">23.5MB</div>
                            <i class="fas fa-chevron-right settings-item-arrow"></i>
                        </div>
                    </div>
                </div>

                <!-- 关于与帮助 -->
                <div class="settings-section">
                    <div class="settings-section-title">关于与帮助</div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-question-circle"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">帮助中心</h3>
                                <p class="settings-item-description">常见问题解答</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right settings-item-arrow"></i>
                        </div>
                    </div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">用户协议</h3>
                                <p class="settings-item-description">查看用户协议和隐私政策</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right settings-item-arrow"></i>
                        </div>
                    </div>
                    <div class="settings-item">
                        <div class="settings-item-left">
                            <div class="settings-item-icon">
                                <i class="fas fa-info-circle"></i>
                            </div>
                            <div class="settings-item-info">
                                <h3 class="settings-item-title">关于我们</h3>
                                <p class="settings-item-description">了解AI恋恋团队</p>
                            </div>
                        </div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right settings-item-arrow"></i>
                        </div>
                    </div>
                </div>

                <!-- 退出登录 -->
                <div class="settings-logout">
                    <div class="settings-logout-button">
                        退出登录
                    </div>
                </div>

                <!-- 版本信息 -->
                <div class="settings-version">
                    AI恋恋 v1.0.0
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div id="tab-bar"></div>
    </div>

    <script src="components/common.js"></script>
</body>

</html>